<template>
  <div class="entry-approval">
    <div class="header">
      <router-link to="/main/renshi/zhaoping/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>入职审批</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待审批" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="position" label="应聘职位" width="150"></el-table-column>
            <el-table-column prop="department" label="部门" width="120"></el-table-column>
            <el-table-column prop="entryDate" label="预计入职日期" width="180"></el-table-column>
            <el-table-column prop="salary" label="薪资" width="120"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="showApprovalDialog(scope.row)">审批</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已审批" name="approved">
          <el-table :data="approvedList" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="position" label="应聘职位" width="150"></el-table-column>
            <el-table-column prop="department" label="部门" width="120"></el-table-column>
            <el-table-column prop="entryDate" label="预计入职日期" width="180"></el-table-column>
            <el-table-column prop="approvalResult" label="审批结果" width="120">
              <template slot-scope="scope">
                <el-tag :type="scope.row.approvalResult === '通过' ? 'success' : 'danger'">
                  {{ scope.row.approvalResult }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="approvalTime" label="审批时间" width="180"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="入职申请详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="entry-detail" v-if="currentEntry">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="姓名">{{ currentEntry.name }}</el-descriptions-item>
          <el-descriptions-item label="应聘职位">{{ currentEntry.position }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{ currentEntry.department }}</el-descriptions-item>
          <el-descriptions-item label="预计入职日期">{{ currentEntry.entryDate }}</el-descriptions-item>
          <el-descriptions-item label="薪资待遇">{{ currentEntry.salary }}</el-descriptions-item>
          <el-descriptions-item label="试用期">{{ currentEntry.probationMonths }}个月</el-descriptions-item>
        </el-descriptions>

        <div class="entry-materials">
          <h4>入职材料</h4>
          <el-checkbox-group v-model="currentEntry.materials" disabled>
            <el-checkbox label="身份证">身份证</el-checkbox>
            <el-checkbox label="学历证书">学历证书</el-checkbox>
            <el-checkbox label="离职证明">离职证明</el-checkbox>
            <el-checkbox label="体检报告">体检报告</el-checkbox>
          </el-checkbox-group>
        </div>

        <div class="approval-history" v-if="currentEntry.approvalHistory">
          <h4>审批记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(history, index) in currentEntry.approvalHistory"
              :key="index"
              :timestamp="history.time"
              :type="history.result === '通过' ? 'success' : history.result === '拒绝' ? 'danger' : 'primary'">
              {{ history.approver }} {{ history.action }}
              <p v-if="history.comment" class="approval-comment">{{ history.comment }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <!-- 审批对话框 -->
    <el-dialog title="入职审批" :visible.sync="approvalDialogVisible" width="40%">
      <el-form :model="approvalForm" label-width="100px">
        <el-form-item label="审批结果">
          <el-radio-group v-model="approvalForm.result">
            <el-radio label="通过">通过</el-radio>
            <el-radio label="拒绝">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见">
          <el-input type="textarea" v-model="approvalForm.comment" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="approvalDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitApproval">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          id: 1,
          name: '张三',
          position: '前端开发工程师',
          department: '技术部',
          entryDate: '2024-04-01',
          salary: '15k',
          probationMonths: 3,
          materials: ['身份证', '学历证书', '体检报告']
        }
      ],
      approvedList: [
        {
          id: 2,
          name: '李四',
          position: '后端开发工程师',
          department: '技术部',
          entryDate: '2024-03-15',
          approvalResult: '通过',
          approvalTime: '2024-03-10 14:30:00',
          approvalHistory: [
            {
              time: '2024-03-10 14:30:00',
              approver: '王经理',
              action: '审批通过',
              result: '通过',
              comment: '同意入职'
            }
          ]
        }
      ],
      detailDialogVisible: false,
      approvalDialogVisible: false,
      currentEntry: null,
      approvalForm: {
        result: '通过',
        comment: ''
      }
    }
  },
  methods: {
    viewDetail(row) {
      this.currentEntry = row
      this.detailDialogVisible = true
    },
    showApprovalDialog(row) {
      this.currentEntry = row
      this.approvalForm = {
        result: '通过',
        comment: ''
      }
      this.approvalDialogVisible = true
    },
    submitApproval() {
      if (!this.approvalForm.comment) {
        this.$message.error('请填写审批意见')
        return
      }

      // TODO: 提交审批结果到后端
      const approvalHistory = {
        time: new Date().toLocaleString(),
        approver: '当前用户',
        action: this.approvalForm.result === '通过' ? '审批通过' : '审批拒绝',
        result: this.approvalForm.result,
        comment: this.approvalForm.comment
      }

      this.currentEntry.approvalResult = this.approvalForm.result
      this.currentEntry.approvalTime = approvalHistory.time
      this.currentEntry.approvalHistory = this.currentEntry.approvalHistory || []
      this.currentEntry.approvalHistory.push(approvalHistory)

      // 从待审批列表移动到已审批列表
      const index = this.pendingList.findIndex(item => item.id === this.currentEntry.id)
      if (index > -1) {
        this.pendingList.splice(index, 1)
        this.approvedList.unshift(this.currentEntry)
      }

      this.$message.success('审批提交成功')
      this.approvalDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.entry-approval {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .entry-materials {
    margin: 20px 0;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }
  }

  .approval-history {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    .approval-comment {
      margin: 5px 0 0;
      color: #606266;
      font-size: 13px;
    }
  }
}
</style> 